<template>
	<view class="themeItem">
		<navigator :url="`/pages/classList/classList?id=${item._id}&name=${item.name}`" class="box" v-if="!isMore">
			<image class="pic" :src="item.picurl" mode="aspectFill"></image>
			<view class="mask">{{ item.name }}</view>
			<view class="tab">{{ formatTimestamp(item.updateTime) }}</view>
		</navigator>
		<navigator url="/pages/classify/classify/classify" open-type="reLaunch" class="box more" v-else>
			<image class="pic" src="/common/images/more.jpg" mode="aspectFill"></image>
			<view class="mask">
				<uni-icons type="more-filled" size="34" color="white"></uni-icons>
				<view class="text">
					更多
				</view>
			</view>
		</navigator>
	</view>
</template>

<script setup>
   import { formatTimestamp } from "@/utils/common.js"
   defineProps({
	   isMore:{
		   type:Boolean,
		   default:false,
	   },
	   item:{
		   type:Object,
		   default(){
			   return {
				   name:"默认名称",
				   picurl:"/common/images/classify1.jpg",
				   updateTime:Date.now() - 1000*60*60*5
			   }
		   }
	   }
   })
</script>

<style lang="scss">
   .themeItem {
	  .box {
		  height: 340rpx;
		  border-radius: 10rpx;
		  overflow: hidden;
		  position: relative;
		  .pic{
			  height: 100%;
			  width: 100%;
		  }
		  .mask {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 70rpx;
			color: white;
            display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(0, 0, 0, 0.2); //透明度0.2的白色配合下面
			backdrop-filter: blur(20rpx); //将背景模糊处理   就能出现玻璃磨砂效果
			font-weight: 600;
		  }
		  .tab {
			top:0;
			position: absolute;
			background-color: rgba(250,129,90,0.7);
			color: white;
			font-size: 22rpx;
			padding: 6rpx 14rpx;
			border-radius: 0 0 20rpx 0;
			transform: scale(0.8);
			transform-origin: left top;
		  }
	  } 
      .box.more {
	      .mask {
		      width: 100%;
		      height: 100%;
			  flex-direction: column;
	      }
	       .text {
		      font-size: 28rpx;
	      }
   }
   }
</style>